<template>
  <div id="container"></div>
  <!-- 地图容器 -->
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'; // 导入高德地图加载器
import { ref, onUnmounted } from 'vue'; // 导入 Vue 的响应式 API
import { mapConfig } from '@/config/mapConfig'; // 导入地图配置

// 定义响应式变量
const mapValue = ref(''); // 用于存储地图点击位置的经纬度信息
const geocoder = ref(null); // 声明 geocoder 变量，用于地址解析
const log = console; // 用于日志输出
// let map; // 声明 map 变量以便在其他地方使用
const map = ref(null); // 地图实例
const marker = ref(null); // 声明 marker 变量，用于存储地图上的标记
const mapData = ref({});
const address = ref('');
// 接收父组件传递的 addObj
const props = defineProps({
  addObj: {
    type: Object,
    required: true,
    default: () => ({
      ranchLatitude: null,
      ranchLongitude: null,
      ranchAddress: null,
      ranchAddressDetail: null,
    }), // 设置默认值以防止 undefined 错误
  },
  isOpen: {
    type: Boolean,
    required: true,
  },
  editObj: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['mapSuccess']);
// 初始化地图的函数
const initMap = () => {
  // 加载高德地图 API
  AMapLoader.load({
    key: mapConfig.key, // 从配置文件中获取 API 密钥
    version: '2.0', // 指定 API 版本
  })
    .then((AMap) => {
      // 加载成功后的回调
      console.log(AMap); // 打印 AMap 对象以便调试

      // 渲染地图
      map.value = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式
        zoom: 15, // 设置地图缩放级别
        center: [106.594459, 29.423345], // 设置地图中心点的经纬度
      });

      // 创建编码对象，用于地址解析
      AMap.plugin('AMap.Geocoder', function () {
        geocoder.value = new AMap.Geocoder({
          // city: '010', // 设置城市为北京（010 为北京的区号）
          // radius: 1000, // 设置查询范围，默认 500 米
        });
      });

      // 如果有经纬度，则设置地图中心并添加标记
      if (props.addObj.ranchLatitude && props.addObj.ranchLongitude) {
        const lnglat = [props.addObj.ranchLongitude, props.addObj.ranchLatitude];
        map.value.setCenter(lnglat);
        marker.value = new AMap.Marker({
          position: lnglat,
        });
        map.value.add(marker.value);
      }

      // 监听地图点击事件
      map.value.on('click', function (e) {
        // 获取点击位置的经纬度
        mapValue.value = `东经：${e.lnglat.getLng()}, 北纬：${e.lnglat.getLat()}`;
        // 更新 mapData 的值为一个对象
        mapData.value = {
          ranchLatitude: e.lnglat.getLat(),
          ranchLongitude: e.lnglat.getLng(),
        };
        console.log(mapValue.value); // 打印点击的经纬度
        console.log(mapData.value);
        emit('mapSuccess', mapData.value);

        // 查询地址信息
        const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]; // 获取经纬度数组
        geocoder.value.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            console.log('地图信息', result); // 打印返回的地址信息
          } else {
            log.error('根据经纬度获取地址失败'); // 处理地址查询失败的情况
          }
        });

        // 添加 marker
        if (marker.value) {
          map.value.remove(marker.value); // 移除旧的 marker
        }
        // 创建新的 marker 并添加到地图上
        marker.value = setMarker(e.lnglat.getLng(), e.lnglat.getLat());
        map.value.add(marker.value);
      });

      // 示例：根据地址获取位置
      // const address = '北京市海淀区中关村软件园'; // 要查询的地址

      // geocoder.value.getLocation(address, function (status, result) {
      //   if (status === 'complete' && result.info === 'OK') {
      //     // 如果查询成功，打印返回的地理坐标信息
      //     console.log(result);
      //   }
      // });
    })
    .catch((error) => {
      console.error('加载高德地图失败', error); // 处理加载失败的情况
    });
  // if (map.value) return; // 如果地图已经初始化，则返回
};
const getLocationByAddress = (address) =>
  new Promise((resolve, reject) => {
    if (!geocoder.value) {
      reject('地图未初始化');
    }
    geocoder.value.getLocation(address, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        const firstMatch = result.geocodes[0];
        const { lng, lat } = firstMatch.location;
        resolve({ result, lng, lat });
      }
    });
  });

watchEffect(async () => {
  // debugger;
  // && geocoder.value
  // props.editObj.ranchAddress
  if (props.addObj.ranchAddress) {
    address.value = `${props.editObj.ranchAddress},${props.editObj.ranchAddressDetail}`.replaceAll(',', '');
    const { lng, lat } = await getLocationByAddress(address.value);
    map.value.setCenter([lng, lat]); // 更新地图中心
    // 添加 marker
    if (marker.value) {
      map.value.remove(marker.value); // 移除旧的 marker
    }
    marker.value = setMarker(lng, lat); // 添加新的 marker
    map.value.add(marker.value);

    console.log(lng, lat);
  }
});
// 设置 marker 的函数
const setMarker = (lng, lat) => {
  // 定义 marker 的内容
  const markerContent = `
    <div class="custom-content-marker">
      <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
      <div>${lng}, ${lat}</div>
    </div>`;

  const position = new AMap.LngLat(lng, lat); // 创建经纬度对象
  const marker = new AMap.Marker({
    position: position, // 设置 marker 的位置
    offset: new AMap.Pixel(-13, -30), // 设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
    content: markerContent, // 设置 marker 的内容
  });

  return marker; // 返回创建的 marker
};
// 当父组件传递的 addObj 更新时重新初始化地图
watchEffect(() => {
  if (props.addObj.ranchLatitude && props.addObj.ranchLongitude) {
    initMap(); // 重新初始化地图并设置标记
  }
});

// 清理地图的方法
const clearMap = () => {
  if (map.value) {
    map.value.destroy(); // 销毁地图实例
    map.value = null; // 清空地图引用
  }
};
// 生命周期钩子
// 在 mounted 生命周期中使用 nextTick
onMounted(() => {
  // if (props.isOpen) {
  initMap();
  // }
});

// 在组件卸载时销毁地图
onUnmounted(() => {
  // clearMap();
  if (map.value) {
    map.value.destroy(); // 销毁地图实例
  }
  // console.log('地图销毁');
});
// 监听 isOpen 的变化
// watchEffect(() => {
//   if (props.isOpen) {
//     initMap();
//   } else {
//     clearMap();
//   }
// });

// 导出方法
defineExpose({ initMap, clearMap });
</script>

<style scoped>
#container {
  width: 100%; /*  // 设置地图容器宽度为 100% */
  height: 100%; /*// 设置地图容器高度为 100% */
}
.custom-content-marker {
  text-align: center; /*  // 设置内容居中 */
}
.custom-content-marker img {
  width: 20px; /* // 设置 marker 图标的宽度 */
  height: 20px; /* // 设置 marker 图标的高度 */
}
</style>
